<template>
  <div id="product">
    <!-- header S -->
    <div class="m_header" id="m_header">
      <div class="header-con tab-box">
        <div class="lf-con">
          <van-icon name="arrow-left"/>
        </div>
        <div class="mid-con" id="detailAnchor">
          <a href class="item cur">
            <span>商品</span>
          </a>
          <a href class="item">
            <span>评价</span>
          </a>
          <a href class="item">
            <span>详情</span>
          </a>
          <a href class="item">
            <span>推荐</span>
          </a>
        </div>
        <div class="rt-con">
          <van-icon name="ellipsis"/>
        </div>
      </div>
    </div>
    <!-- header E -->
    <!-- Banner star -->
    <van-swipe :autoplay="3000" indicator-color="white" class="swipe-con">
      <van-swipe-item v-for="(item,index) in banner" :key="index">
        <img :src="item" class="swipe-img" alt>
      </van-swipe-item>
    </van-swipe>
    <!-- Banner ent-->
    <div class="fn-wrap">
      <van-row>
        <van-col span="21">
          <h1 class="pro-h1">【满199减100】农夫好牛澳洲整切菲力西冷牛排套餐5片750克手切静腌 年货首选</h1>
        </van-col>
        <van-col span="3">
          <div class="pro-focus">
            <van-icon name="like-o" class="iocn"/>
            <span>关注</span>
          </div>
        </van-col>
        <van-col span="24">
          <h5 class="pro-msg-txt">此商品将于2019-02-17,00点结束闪购特卖，元宵节抢鲜行动</h5>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="3">
          <span class="tit-tag">领劵</span>
        </van-col>
        <van-col span="18">
          <div class="fn-info">
            <span class="quan">满199减100</span>
            <span class="quan bg-red">新用户专享</span>
          </div>
        </van-col>
        <van-col span="3">
          <van-icon name="ellipsis"/>
        </van-col>
      </van-row>
      <div class="gap"></div>
    </div>
    <!-- 商品导航S -->
    <van-goods-action>
      <van-goods-action-mini-btn icon="chat-o" text="客服"/>
      <van-goods-action-mini-btn info="5" icon="cart-o" text="购物车"/>
      <van-goods-action-mini-btn icon="shop-o" text="店铺"/>
      <van-goods-action-big-btn text="加入购物车"/>
      <van-goods-action-big-btn primary text="立即购买"/>
    </van-goods-action>
    <!-- 商品导航E -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      banner: [
        "https://m.360buyimg.com/mobilecms/s843x843_jfs/t16891/202/1820571382/740955/30ecbc23/5adaa72aN658002df.jpg!q70.dpg.webp",
        "https://m.360buyimg.com/mobilecms/s843x843_jfs/t18613/52/1804275245/641346/ed7f0013/5adaa731N27545f1e.jpg!q70.dpg.webp"
      ]
    };
  }
};
</script>
<style>
.van-goods-action:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid #ddd;
  z-index: 5;
  opacity: 0.5;
}
#product {
  margin-bottom: 56px;
}
#m_header {
  height: 45px;
}
.swipe-img {
  width: 100%;
}
.header-con {
  position: fixed;
  width: 100%;
  min-height: 45px;
  left: 0;
  right: 0;
  z-index: 10;
  background: #fff;
}
.header-con .lf-con {
  position: absolute;
  left: 0;
  height: 45px;
  width: 40px;
  font-size: 16px;
  padding-top: 14px;
}
.header-con .rt-con {
  position: absolute;
  right: 0;
  width: 40px;
  top: 0;
  font-size: 16px;
  padding-top: 14px;
}
.header-con .mid-con {
  display: flex;
  justify-content: center;
}
.header-con .item {
  padding: 0 15px;
  line-height: 45px;
  color: #252525;
  font-size: 14px;
}
.header-con .item.cur {
  background: url(../assets/images/location.png) no-repeat left center;
  color: #e93b3d;
  background-size: 8px;
}
.header-con .item span {
}
.fn-wrap > div {
  padding: 12px;
  position: relative;
}
.fn-wrap > div:nth-child(n + 2)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 15px;
  border-top: 1px solid #f0f0f0;
}
.pro-h1 {
  font-size: 16px;
  text-align: justify;
  margin-bottom: 0;
}
.fn-wrap .tit-tag {
  color: #999;
  font-size: 13px;
}
.fn-info {
  text-align: left;
}
.fn-info .quan {
  position: relative;
  margin-right: 5px;
  display: inline-block;
  padding: 0 10px;
  height: 18px;
  font-size: 12px;
  border-top: 1px solid #e4393c;
  border-bottom: 1px solid #e4393c;
}
.fn-info .quan::before {
  position: absolute;
  content: "";
  left: 0;
  top: -1px;
  width: 7.5px;
  height: 18px;
  background: #fff url("../assets/images/coupon.png") no-repeat 0 0;
  background-size: 16px 18px;
  display: inline-block;
}
.fn-info .quan::after {
  position: absolute;
  content: "";
  right: 0;
  top: -1px;
  width: 5.5px;
  height: 18px;
  background: #fff url("../assets/images/coupon.png") no-repeat -8.8px 0;
  background-size: 12px 18px;
  display: inline-block;
}
.fn-info .bg-red {
  color: #fff;
  background: #e4393c;
}
.fn-info .bg-red::before {
  position: absolute;
  content: "";
  right: 0;
  top: -1px;
  width: 5.5px;
  height: 18px;
  background: #fff url("../assets/images/coupon_red.png") no-repeat 0 0;
  background-size: 12px 18px;
  display: inline-block;
}
.fn-info .bg-red::after {
  position: absolute;
  content: "";
  right: 0;
  top: -1px;
  width: 5.5px;
  height: 18px;
  background: #fff url("../assets/images/coupon_red.png") no-repeat -8.8px 0;
  background-size: 12px 18px;
  display: inline-block;
}
.pro-focus {
  position: relative;
  padding-left: 14px;
}
.pro-focus::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  border-left: 1px solid #ddd;
}

.pro-focus .iocn {
  display: block;
  font-size: 18px;
}
.pro-focus span {
  font-size: 12px;
}
.pro-msg-txt {
  font-size: 12px;
  color: #e4393c;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 0;
}
.fn-wrap .gap {
  padding: 10px 0 0 0;
  background: #e8e8ed;
  margin: -1px 0;
  position: relative;
  z-index: 2;
}
</style>


